<script setup>
    import { ref, computed } from 'vue'
    import request from "../../common/utils/request"
    import { useRouter } from 'vue-router'
    import utils from "../../common/utils/utils"
    import store from "../../store/index"

    const router = useRouter()
    const collectApps = ref([])
    const applicationGroupList = ref([])
    const collectAppIds = computed(() => {
        return collectApps.value.map(app => app.id)
    })

    const getCategoryList = async () => {
        const { applicationList } = await store.dispatch("GetSceneApps")
        applicationGroupList.value = applicationList
    }

    const getApplicationList = async () => {
        const requests = applicationGroupList.value.map((item) => {
            return request.get("/work_ai", "/application/category/app_list", { is_industry: 0, cat_id: item.id }).then(({ app_list }) => {
                item.app_list = app_list
            })
        })

        await Promise.all(requests)
    }

    
    const getUserCollectApps = async () => {
        const { data } = await request.get("/work_ai", "/user/collect/list", { type: 'application' })
        collectApps.value = data.map(item => item.collectable)
    }

    const initData = async () => {
        const isLogin = await utils.checkLogin()
        
        if (!isLogin) {
            router.push({name: 'Work'})
            return
        }

        await getCategoryList()
        await getApplicationList()
        await getUserCollectApps()
    }

    initData()

    const onAppClick = (item) => {
        const group = applicationGroupList.value.find(group => group.app_list.some(app => app.id === item.id && ! group.hot));

        router.push(`/sceneModel/scene/${group.id}?appId=${item.id}`)
    }

    const onCollectClick = (app) => {
        const status = collectAppIds.value.includes(app.id) ? 0 : 1
        
        request.post("/work_ai", "/user/collect", { collect_type: 'application', collect_id: app.id, status }).then(() => {
            if(status){
                collectApps.value.push(app)
            }else{
                collectApps.value = collectApps.value.filter(item => item.id !== app.id)
            }
        })
    }
</script>

<template>
    <div class="page-warp">
        <div class="app-list" v-if="collectApps.length > 0">
            <div class="app-card" v-for="(app, index) in collectApps" :key="index" @click="onAppClick(app)">
                <div class="flex align-center">
                    <div class="app-card__image">
                        <img :src="app.icon">
                    </div>
                    <div class="app-card__title">
                        {{ app.name }}
                    </div>
                </div>
                <div class="app-card__info">
                    {{ app.info }}
                </div>
                <div class="app-card__icon" @click.stop="onCollectClick(app)">
                    <CuIcon class="app-card__icon--shoucang" :type="collectAppIds.includes(app.id) ? 'icon-shoucang2' : 'icon-shoucang'"/>
                </div>
                <ArrowRightOutlined class="app-card__arrow" />
            </div>
        </div>
        <div class="h-full align-center flex justify-center" v-else>
            <div>
                <img src="../../common/image/collect-empty.png"/>
                <p class="text-center mt-20" style="color: #9a9999;">哎呦，你还没有收藏应用哦！</p>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .page-warp {
        padding: 30px;
        height: 100%;


        .app-list {
            display: grid;
            gap: 20px;
            grid-template-columns: repeat(5, minmax(0, 1fr));

            .app-card {
                border-radius: 10px;
                background: #fff;
                border: 1px solid #e9e9e9;
                width: 100%;
                padding: 20px 16px 30px;
                cursor: pointer;
                position: relative;

                &__image {
                    width: 46px;
                    height: 46px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                &__title {
                    margin-left: 10px;
                    font-size: 16px;
                    font-weight: 600;
                }

                &__info {
                    margin-top: 20px;
                    color: #767676;
                    font-size: 12px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                }

                &__icon {
                    position: absolute;
                    right: 15px;
                    top: 10px;
                    display: none;

                    &--shoucang {
                        font-size: 16px;
                    }
                }

                &__arrow {
                    color: @primary-color;
                    position: absolute;
                    right: 15px;
                    bottom: 10px;
                    font-size: 16px;
                    visibility: hidden;
                }

                &:hover {
                    -webkit-transform: translateY(-3px);
                    -ms-transform: translateY(-3px);
                    transform: translateY(-3px);
                    border: 1px solid @primary-color;

                    .app-card__arrow {
                        visibility: visible;
                    }

                    .app-card__icon {
                        display: block;
                    }
                }
            }
        }
    }

    @media (min-width: 1024px) 
    {
        .app-list {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }


    @media (min-width: 1280px) 
    {
        .app-list {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        }
    }

    @media (min-width: 1536px) 
    {
        .app-list {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        }
    }
</style>